<template>
  <!--  v-if="props.isAdd"-->
  <!--    title="物料列表"-->
  <!--    v-bind="$attrs"-->

  <BasicTable @register="registerTable">
    <template #toolbar>
      <a-button type="primary" size="small" @click="openFn">添加数据</a-button>
    </template>
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'action'">
        <a-button type="primary" size="small" danger @click="showDeleteConfirm(record)">
          <template #icon>
            <DeleteOutlined />
          </template>
        </a-button>

        <!--        <TableAction-->
        <!--          :actions="[-->
        <!--              {-->
        <!--                icon: 'ant-design:delete-outlined',-->
        <!--                color: 'error',-->
        <!--                popConfirm: {-->
        <!--                  title: '是否删除？',-->
        <!--                  placement: 'left',-->
        <!--                  confirm: handleDelete.bind(null, record),-->
        <!--                },-->
        <!--              },-->
        <!--            ]"-->
        <!--        />-->
      </template>
      <!--      <template v-if="column.key === 'mouldName'">-->
      <!--        <div style="width: 100%;cursor: pointer;" @click="openUserModal(record)">{{record.mouldName}}</div>-->
      <!--      </template>-->
    </template>
  </BasicTable>

  <MSelectTableModal @register="register" @success="onLoadDataFn"></MSelectTableModal>
</template>

<script lang="ts" setup>
  import {
    BasicTable,
    useTable,
    ColumnChangeParam,
    BasicColumn,
    FormSchema,
  } from '@/components/Table';
  import { useModal } from '@/components/Modal';
  import { useAttrs } from '@vben/hooks';
  import { DeleteOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue';

  import { ref, createVNode, computed, PropType, onMounted, watch } from 'vue';
  import { useMessage } from '@/hooks/web/useMessage';
  import { useUserStore } from '@/store/modules/user';
  import { mouldListApi } from '@/api/sys/msUser';
  import { columns } from './role.data';
  import { Modal } from 'ant-design-vue';

  import MSelectTableModal from './add/MSelectTableModal.vue';
  const userStore = useUserStore();

  const attrs = useAttrs();

  defineOptions({ name: 'formSelectTable' });

  const props = defineProps({
    api: {
      type: Function as PropType<(arg?: any) => Promise<Recordable<any>>>,
      default: null,
    },
    isAdd: { type: Boolean, default: false },
    dataValue: { type: Array, default: [] },
  });

  const emit = defineEmits(['change', 'update:value', 'success']);
  const [register, { openModal }] = useModal();
  const { createMessage } = useMessage();
  const loading = ref(false);
  const data = computed(() => attrs.value.value);

  const pagination = ref<any>(false);

  // onMounted(()=>{
  //   console.log("--attrs:",unref(attrs));
  //   console.log("--list:",attrs.value)
  // })

  const [registerTable, { reload, setTableData }] = useTable({
    // api: mouldListApi,
    columns,
    dataSource: data.value,
    formConfig: {
      labelWidth: 120,
      // schemas: searchFormSchema,
      autoSubmitOnEnter: true,
    },
    canResize: true,
    useSearchForm: false,
    showTableSetting: true,
    bordered: true,
    showIndexColumn: false,
    actionColumn: {
      width: 80,
      title: '操作',
      dataIndex: 'action',
      // slots: { customRender: 'action' },
      fixed: undefined,
    },
  });

  watch(
    () => data.value,
    (data) => {
      if (data) {
        setTableData(data);
      }
    },
  );

  function openFn() {
    openModal(true, {});
  }

  function onLoadDataFn(list) {
    // console.log("---接收数据:",list)
    let base_arr = [];
    if (data.value) {
      base_arr = [...data.value];
    }
    // ...base_arr
    let arr = [...base_arr, ...list];
    data.value = arr;

    setTableData(arr);
    // console.log("---更新数据:",arr)
    emit('success', arr);
  }
  const showDeleteConfirm = (record) => {
    Modal.confirm({
      title: () => '是否要删除这条记录?',
      icon: () => createVNode(ExclamationCircleOutlined),
      content: () => '提示信息',
      okText: () => '确认',
      okType: 'danger',
      cancelText: () => '取消',
      onOk() {
        // console.log('OK');
        handleDelete(record);
      },
      onCancel() {
        // console.log('Cancel');
      },
    });
  };
  function handleDelete(record: Recordable) {
    //console.log(record);
    for (let a = 0; a < data.value.length; a++) {
      let valueElement = data.value[a];
      if (valueElement.mtid == record.mtid) {
        data.value.splice(a, 1);
      }
    }
    setTableData(data.value);
    // console.log("---删除后的 更新数据:",data.value)
    emit('change', data.value);
  }
</script>

<style scoped></style>
